<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #upload {
        width: 110px;
        line-height: 30px;
        border-radius: 8px;
        outline: 0;
        border: 0;
        background-color: rgb(69, 146, 123);
        color: #fff;
        font-size: 30px;
        cursor: pointer;
    }
</style>

<body>
    <h1>添加文章</h1>
    <form action="/insert" method="post" enctype="multipart/form-data">
        <p>
            标题: <input type="text" name="article" autocomplete="off">
        </p>
        <p>
            封面: <input type="file" name="img" id="img" style="display:none" autocomplete="off" id="fm"><button id="upload">Upload</button>
        </p>
        <p>
            预览: <img src="" alt="" id="preview" width="150px">
        </p>
        <p>
            作者: <input type="text" name="author" autocomplate="off">
        </p>

        <p>
            审核:
            <input type="radio" name='Audit_status' value="0" checked>待审核
            <input type="radio" name='Audit_status' value="1">审核通过
            <input type="radio" name='Audit_status' value="2">审核失败
        </p>
        <p>
            所属:
            <select name="cat_id">
                <option value="0">请选择</option>
                {{each cats item index}}
                <option value="{{item.cate_id}}">{{item.cate_name}}</option>
                {{/each}}
            </select>
        </p>
        <p>
            内容:
            <textarea name="content" cols="30" rows="10"></textarea>
        </p>
        <p>
            <button>添加</button>
        </p>
    </form>
</body>
<script>
   // 上传文件
   let Upload = document.getElementById('upload');
    let imgEle = document.getElementById('img');
    Upload.onclick = function(event){
        imgEle.click();
        // event.preventDefault(); 阻止默认行为
        return false;
    }
    imgEle.onchange = function () {
        let file = this.files[0]

        // 判断是否有上传文件，没有上传则退出
        if (!file) {
            return
        }

        let fileReader = new FileReader()
        fileReader.readAsDataURL(file)
        fileReader.onload = function (e) {
            // console.log(this.result)// base64
            document.getElementById('preview').src = this.result;
            document.getElementById('imgWrap').style.display = '';
        }
    }
</script>

</html>